.admonition {
  --ifm-alert-border-radius: 0;
  --ifm-alert-padding-vertical: 1.5rem;
  --ifm-alert-padding-horizontal: 1.5rem;

  margin-bottom: 1.5em;
}

[data-theme='dark'] .admonition {
  color: var(--swm-off-white);
}

.admonitionHeading {
  display: flex;
  font-family: var(--swm-admonition-heading-font-family);
  font-weight: var(--swm-admonition-heading-font-weight);
  text-transform: uppercase;

  margin-bottom: 1.1rem;
}

.admonitionHeading code {
  text-transform: none;
}

.admonitionIcon {
  display: inline-block;
  margin-right: 0.4em;

  width: 21px;
  height: 27px;
}

.admonitionIcon svg {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.alert--secondary {
  background-color: var(--swm-admonition-color-secondary);
  box-shadow: -8px 8px 0 var(--swm-admonition-color-secondary-shadow);
}

.alert--success {
  background-color: var(--swm-admonition-color-success);
  box-shadow: -8px 8px 0 var(--swm-admonition-color-success-shadow);
}

.alert--danger {
  background-color: var(--swm-admonition-color-danger);
  box-shadow: -8px 8px 0 var(--swm-admonition-color-danger-shadow);
}

.alert--info {
  background-color: var(--swm-admonition-color-info);
  box-shadow: -8px 8px 0 var(--swm-admonition-color-info-shadow);
}

.alert--caution {
  background-color: var(--swm-admonition-color-caution);
  box-shadow: -8px 8px 0 var(--swm-admonition-color-caution-shadow);
}

/* Styling for quote blocks (labels surrounded by ` sign) in admonitions.
 A direct child of `code` tag is selected, because admonitions can be nested within each other. */
[class*='admonition-secondary'] > [class*='admonitionContent'] > p code {
  background-color: var(--swm-background-quote-secondary);
}

[class*='admonition-success'] > [class*='admonitionContent'] > p code {
  background-color: var(--swm-background-quote-green);
}

[class*='admonition-danger'] > [class*='admonitionContent'] > p code {
  background-color: var(--swm-background-quote-red);
}

[class*='admonition-info'] > [class*='admonitionContent'] > p code {
  background-color: var(--swm-background-quote-blue);
}

[class*='admonition-caution'] > [class*='admonitionContent'] > p code {
  background-color: var(--swm-background-quote-yellow);
}

.admonitionContent > :last-child {
  margin-bottom: 0;
}
